<template>
    <div style="width: 90%;position: relative;margin: auto">
        <template v-for="(good,index) in goods">
            <div style="width: 100%;height: 80px;text-align: center;position: relative;top: 100px;">
                <h3>{{ good[index].goodsname }}</h3>
            </div>
            <div style="width: 100%;position: relative;top: 100px;" >
                <template  v-for="g in good">
                    <img :src="g.imgsrc" class="mallimg" @click="showdetail(g.id)">
                </template>
            </div>
        </template>
    </div>

</template>
<style>
    @media (min-width:700px){
        .mallimg{
            width: 32%;
            position: relative;
            padding-left:30px;
            padding-top:10px
        }
    }
    @media (max-width:700px){
        .mallimg{
            width: 90%;
            position: relative;
            padding-left:30px;
            padding-top:10px
        }
    }
</style>
<script>
    export default{
        data(){
            return{
                goods1:'',
                goods2:'',
                goods: []
            }
        },
        components:{

        },
        created(){
            var _this = this;
            this.$http.get('/mall_goods')
                .then(function(res){
                    _this.goods1 = res.body.data.type1;
                    _this.goods2 = res.body.data.type2;
                    _this.goods.push(res.body.data.type1);
                    _this.goods.push(res.body.data.type2);
                });
        },
        methods:{
            showdetail: function(id){
                console.log(id);
               window.location.href = '/goods_detail?id='+id;
            }
        }
    }
</script>
